import './Chat.scss';
import { useState, useRef } from "react";
import chatStore from "./chat.store";
import ChatService from './Chat.serv';

export default (props: any) => {
    const chatService: ChatService = base.getService(ChatService);
    const { status } = chatStore('status'); //状态管理
    const [value, setValue] = useState('');
    const [data, setData] = useState<object[]>([]);
    const [submiting, setSubmiting] = useState(false);
    const msgRef = useRef<object>({})

    const onTextareaChange = (e: any)=>{
        setValue(e.target.value);
    }
    const onInputKeyUp = (e: any)=>{
        if(e.keyCode == 13) {
            onSubmit();
        }
    }
    const ask = async (question: string)=>{
        const response = await chatService.ask(question);
        setSubmiting(false);
        setData([...data, msgRef.current, { role: 'system', data: response.answer }]);
    }
    const onSubmit = ()=>{
        msgRef.current = { role: 'user', data: value };
        setSubmiting(true);
        setValue('');
        setData([...data, msgRef.current]);
        props.onSubmit && props.onSubmit(value);
        ask(value);
    }
    return (
        <div className="page-chat">
            <div className='chat-header'>
                <div className='model-select'>
                    <select>
                        <option>ChatGPT</option>
                        <option>GLM</option>
                    </select>
                    <span className="status">{status}</span>
                </div>
                <div className='tool-bar'>
                    <span className='bar-btn'><i className='bi bi-upload' />共享</span>
                    <span className='bar-btn'><i className='bi bi-archive' />归档</span>
                    <span className='bar-btn'><i className='bi bi-flag' />报告</span>
                    <span className='bar-btn'><i className='bi bi-trash' />删除</span>
                </div>
            </div>
            <div className='chat-content'>
                {
                    data.map((item: any, index: number)=>{
                        return (
                            <div key={index} className={"msg-container " + item.role}>
                                <div className="msg">{item.data}</div>
                            </div>
                        );
                    })
                }
            </div>
            <div className='chat-footer'>
                <div className='input'>
                    <textarea disabled={submiting} className='text-input' value={value} onChange={onTextareaChange} onKeyUp={onInputKeyUp} />
                    <div className='footer-btns'>
                        <span className='icon-btn'><i className='bi bi-plus' /></span>
                        {
                            submiting 
                            ?<span className='icon-btn btn-disabled'><i className='bi bi-stop-circle-fill' /></span>
                            :<span onClick={onSubmit} className='icon-btn'><i className='bi bi-arrow-up-circle-fill' /></span>
                        }
                        
                    </div>
                </div>
            </div>
        </div>
    );
}